<template>
  <div class="app-container calendar-list-container">
    <!-- 查询-->
    <el-card>
      <div class="block">
        <span style="color:gray; font-size:16px"> 时间范围:      </span>
        <el-date-picker
          v-model="transactionQuery.timeInterval"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="mini"
          align="right">
        </el-date-picker>
        <el-button size="mini" class="filter-item" type="primary" icon="el-icon-search" @click="getList()" v-perm="'b:allsum:search'">搜索</el-button>
      </div>
    </el-card>
    <br/><br/>
    <div :v-show="statistical">
      <el-tag type="success">总收入：{{this.statistical.allTotalFee}}元</el-tag>
      <el-tag type="success">交易笔数：{{this.statistical.transactionNumber}}</el-tag>
      <el-tag type="success">入账笔数：{{this.statistical.tradeNum}}</el-tag>
      <el-tag type="warning">退款笔数：{{this.statistical.refundNum}}</el-tag>
    </div>
    <el-table size="small" :data="list" v-loading.body="listLoading" id="transactionTable"
    element-loading-text="加载中" border fit highlight-current-row :default-sort="{prop: 'tradeDate', order: 'descending'}">
      <el-table-column align="center" label="汇总内容" prop="modeName">
      </el-table-column>
      <el-table-column align="center" label="总收入" prop="allTotalFee">
      </el-table-column>
      <el-table-column align="center" label="总交易笔数" prop="transactionNumber">
      </el-table-column>
      <el-table-column align="center" label="入账笔数" prop="tradeNum">
      </el-table-column>
      <el-table-column align="center" label="退款笔数" prop="refundNum">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import statisticalanalysisApi from '@/api/statisticalanalysis'
  import { allStatistical } from '@/api/transaction'
  import XLSX from 'xlsx'
  import FileSaver from 'file-saver'
  export default {
    name: 'allsummary',
    props: {
      placeholder: null
    },
    data() {
      return {
        statistical: {
          transactionNumber: undefined,
          allTotalFee: undefined,
          tradeNum: undefined,
          refundNum: undefined
        },
        transactionQuery: {
          modeId: undefined, // 支付渠道
          timeInterval: [new Date().setHours(0, 0, 0, 0)-24*60*60*1000*3,new Date(new Date().setHours(0, 0, 0, 0)+24*60*60*1000)], // 支付间隔
          channelId: undefined,
        },
        list: null,
        pickerOptions: {
          shortcuts: [
            { text: '昨天',
              onClick (picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
                picker.$emit('pick', [start, end])
              }
            },
            { text: '前天',
              onClick (picker) {
                const end = new Date()
                const start = new Date()
                end.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 2)
                picker.$emit('pick', [start, end])
              }
            },
            { text: '最近一周',
              onClick (picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', [start, end])
              }
            },
            { text: '最近一个月',
              onClick (picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                picker.$emit('pick', [start, end])
              }
            },
            { text: '最近三个月',
              onClick (picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                picker.$emit('pick', [start, end])
              }
            }
          ]
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList(){
        statisticalanalysisApi.Statistical(this.transactionQuery).then(res => {
          this.list = res.data.staAna
          console.log('statistical', res.data.staAna)
          var allTotalFee = 0
          var tradeNum = 0
          var transactionNumber = 0
          var refundNum = 0
          var weiXinEnterIn = res.data.staAna
          for (var j = 0; j < weiXinEnterIn.length; j++) {
            var tempObj = weiXinEnterIn[j];
            allTotalFee += tempObj.allTotalFee;
            transactionNumber += tempObj.transactionNumber;
            tradeNum += tempObj.tradeNum
            refundNum += tempObj.refundNum
          }
          this.statistical.allTotalFee = allTotalFee.toFixed(2);
          this.statistical.tradeNum = tradeNum
          this.statistical.refundNum = refundNum
          this.statistical.transactionNumber = transactionNumber
        })
      }
    }
  }
</script>
